<template>
  <div class="score orderList orderLayout">
    <div class="content">
      <div class="nav-bar">
        <ul>
          <li :class="{'active':scoreType == 'moneyBack'}" @click="changeStatus('moneyBack')" v-if="userInfo.settlementRights == 1">返现记录</li>
          <li :class="{'active':scoreType == 'buy'}" @click="changeStatus('buy')">购买积分</li>
          <li :class="{'active':scoreType == 'activity'}" @click="changeStatus('activity')">活动积分</li>
          <li :class="{'active':scoreType == 'member'}" @click="changeStatus('member')">邀请会员</li>
        </ul>
      </div>
      <!-- buy -->
      <div class="scoreDetail" v-show="scoreType == 'buy'">
        <div class="info">
          <div>
            <ul>
              <li class="lighter-gray fz12">已购产品</li>
              <li class="fz18 black">{{puchasePoint.purchasedProduct}}<span class="gray_info">({{puchasePoint.countPendingProduct}})</span></li>
            </ul>
          </div>
          <div class="line"></div>
          <div>
            <ul>
              <li class="lighter-gray fz12">现有积分</li>
              <li class="fz18 black">{{puchasePoint.point}}</li>
            </ul>
          </div>
          <div class="line"></div>
          <div>
            <ul>
              <li class="lighter-gray fz12">已使用积分</li>
              <li class="fz18 black">{{puchasePoint.usedPoint}}</li>
            </ul>
          </div>
        </div>
        <div class="feedback" v-if="userInfo.settlementRights == 1">
          <p class="fz16 lighter-gray">请输入返现积分数量</p>
          <div class="numBox">
            <div class="num">
              <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/decre.png" @click="reduceNum()">
              <input type="text" name="" v-model="scoreNum">
              <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/incre.png" @click="increaseNum()">
            </div>
            <div class="btn" @click="submitScoreNum()">
              <span>确认兑换</span>
            </div>
          </div>
        </div>
      </div>
      <div class="list" v-show="scoreType == 'buy'">
        <div v-if="logList.length > 0">
          <div class="list-item" v-for="log in logList" v-if="log.type != 10">
            <div>
              <p>{{log.content}}</p>
            </div>
            <div class="amount gray">
              <span><span class="fz12">积分</span>&nbsp;&nbsp;<span class="fz16">{{log.point}}</span></span>
              <!-- <span><span class="fz12">实付金额</span>&nbsp;&nbsp;&yen;<span class="fz16">{{log.point * 0.75}}</span></span> -->
            </div>
            <div class="handle">
              <li><img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/clock.png" class="icon">{{log.createTime | unixToDate}}</li>
              <!-- <li class="delBtn"><img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/delBtn.png"></li>
              <li class="delBtn"><img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/payAgain.png"></li> -->
            </div>
          </div>
        </div>
        <div class="null-status" v-else>
          <p>这里还没有积分变化记录哦！</p>
        </div>
      </div>
      <!-- activity -->
      <div class="scoreDetail" v-show="scoreType == 'activity'">
        <div class="info">
          <div>
            <ul>
              <li class="lighter-gray fz12">今日所得</li>
              <li class="fz18 black">{{activityPoint.sameDayActivityPoint}}</li>
            </ul>
          </div>
          <div class="line"></div>
          <div>
            <ul>
              <li class="lighter-gray fz12">现有积分</li>
              <li class="fz18 black">{{activityPoint.point}}</li>
            </ul>
          </div>
          <div class="line"></div>
          <div>
            <ul>
              <li class="lighter-gray fz12">已使用积分</li>
              <li class="fz18 black">{{activityPoint.usedPoint}}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="record-list" v-show="scoreType == 'activity'">
        <div v-if="logList.length > 0">
          <div class="score-record" v-for="log in logList" v-if="log.type == 10">
            <div>
              <ul>
                <li>
                  <p class="fz14 gray bold">{{log.name}}</p>
                </li>
                <li>
                  <p class="fz12 lighter-gray">{{log.createTime | unixToDate}}</p>
                </li>
              </ul>
            </div>
            <div>
              <span class="status">{{log.point > 0 ? '+'+log.point : log.point}}</span>
            </div>
          </div>
        </div>
        <div v-else class="null-status">
          <p>这里还没有积分变化记录哦！</p>
        </div>
      </div>
      <div class="record-list" v-show="scoreType == 'moneyBack'">
        <div v-if="redeemRewardlist.length > 0">
          <div class="score-record" v-for="record in redeemRewardlist">
            <div>
              <ul>
                <li>
                  <p class="fz14 gray bold">已完成返现</p>
                </li>
                <li>
                  <p class="fz12 lighter-gray">{{record.updateTime}}</p>
                </li>
              </ul>
            </div>
            <div>
              <span class="status">-{{record.amount}}</span>
            </div>
          </div>
        </div>
        <div v-else class="null-status">
          <p>这里还没有积分返现记录哦！</p>
        </div>
      </div>
      <div v-show="scoreType == 'member'">
        <div class="scoreDetail">
          <div class="info">
            <div>
              <ul>
                <li class="lighter-gray fz12">成功邀请</li>
                <li class="fz18 black">{{statInviterData.invitationInToday}}</li>
              </ul>
            </div>
            <div class="line"></div>
            <div>
              <ul>
                <li class="lighter-gray fz12">邀请总人数</li>
                <li class="fz18 black">{{statInviterData.totalInviter}}</li>
              </ul>
            </div>
            <div class="line"></div>
            <div>
              <ul>
                <li class="lighter-gray fz12">获得积分</li>
                <li class="fz18 black">{{statInviterData.point}}</li>
              </ul>
            </div>
          </div>
        </div>
        <p class="member-congratutation-info" v-if="inviterCredit.length > 0 "><img src="../../../img/smile2.png" alt="" class="fufill_icon">恭喜您已成功邀请{{inviterCredit.length}}名会员啦！</p>
        <p class="member-congratutation-info" v-else><img src="../../../img/smile2.png" alt="" class="fufill_icon">您还没有邀请任何会员哦！</p>
        <div v-if="inviterCredit.length > 0">
          <div class="member-list" v-for="(credit,index) in filterInviteCredit">
            <div class="thumb" v-if="credit.isFull"><img src="../../../img/thumb.png"></div>
            <div class="item" v-for="item in credit.data" v-if="item">
              <ul>
                <li><img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/avatar_icon_man.png" alt=""></li>
                <li><span class="name">{{item.username}}</span></li>
                <li><span class="member-score">积分:{{item.point}}</span></li>
              </ul>
            </div>
            <div class="item" v-for="(item,index) in credit.data" v-if="!item">
              <ul>
                <li><img src="../../../img/no-member.png" alt=""></li>
                <!-- <li><span class="member-null">还差一位</span></li> -->
                <!-- <li><span class="member-null">加油！加油！</span></li> -->
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div style="text-align: center;margin-top: 1.3rem;">
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/buy2.png" style="width: 15.3rem;" @click="orderPre()">
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/invite.png" class="handleBtn" @click="share()">
        <div class="staff-buy-btn" v-if="insiderName" @click="staffBuy()">
          家族购买
        </div>
      </div>
    </div>
    <share-pop :show.sync="showPop"></share-pop>
  </div>
</template>
<script>
import { Toast } from 'mint-ui';
import { mapActions, mapGetters } from 'vuex';
import sharePop from "components/sharePop"
import { getRedeemReward } from "api/moneyBack"
import { wxshare } from 'common/mixin'

export default {
  mixins: [wxshare],
  data() {
    return {
      scoreType: 'moneyBack',
      puchasePoint: {},
      activityPoint: {},
      isSendingRequest: true,
      logList: [],
      scoreNum: 0,
      showPop: false,
      redeemRewardlist: [],
      statisticsData: {},
      inviterCredit: [],
      filterInviteCredit: [],
      statInviterData: {},
      userInfo: {}
    }

  },
  computed: {
    ...mapGetters([
      'phone',
      'insiderName'
    ])
  },
  components: { sharePop },
  watch: {
    scoreType: function(newVal) {
      if (newVal == 'moneyBack') {
        this.getRedeemRewardList();
      } else if (newVal == 'member') {
        this.GetStatInviterCredit().then(result => {
          this.inviterCredit = result.data;
          this.filterInviteCredit = [];
          if (this.inviterCredit.length > 0) {

            var j = 1;
            var temp = [];
            for (let i = 0; i < this.inviterCredit.length; i++) {
              temp.push(this.inviterCredit[i]);
              j++;
              if (j == 4 || i == this.inviterCredit.length - 1) {
                if (j == 4) {
                  this.filterInviteCredit.push({
                    data: temp,
                    isFull: true
                  });
                } else {
                  temp.length = 3;
                  this.filterInviteCredit.push({
                    data: temp,
                    isFull: false
                  });
                  console.log('result test ', this.filterInviteCredit)
                }

                j = 1;
                temp = [];
              }
            }
          }

        });
        this.GetStatInviterData().then(result => {
          this.statInviterData = result.data;
        })
      } else if (newVal == 'buy') {
        this.GetStatPuchaseCreditDate().then(result => {
          this.puchasePoint = result.data;
        })
      } else if (newVal == 'activity') {
        this.GetStatActivityCreditDate().then(result => {
          this.activityPoint = result.data;
        })
      }
    }
  },
  methods: {
    ...mapActions({
      GetInfo: 'GetInfo',
      GetScore: 'GetScore',
      GetlistLog: 'GetlistLog',
      GetstatisticsData: 'GetstatisticsData',
      GetStatInviterCredit: 'GetStatInviterCredit',
      GetStatInviterData: 'GetStatInviterData',
      GetStatPuchaseCreditDate: 'GetStatPuchaseCreditDate',
      GetStatActivityCreditDate: 'GetStatActivityCreditDate'
    }),
    changeStatus: function(type) {
      this.scoreType = type;
    },
    submitScoreNum: function() {
      if (!this.scoreNum || this.scoreNum > this.puchasePoint.point) {
        Toast('请输入正确的返现积分数量');
        return;
      }

      // if (this.puchasePoint.point < 3000) {
      if (this.scoreNum < 3000) {
        Toast('满3000积分才能申请返现');
        return;
      }

      console.log('this.scoreNum', this.scoreNum)
      this.$router.push({ path: 'moneyBack', query: { point: this.scoreNum } });
    },
    // 购买页面
    orderPre: function() {
      this.$router.push({ path: 'orderPre' });
    },
    staffBuy: function() {
      this.$router.push({ path: 'orderPre', query: { from: "insider" } });
    },
    share: function() {
      this.showPop = true;
    },
    reduceNum: function() {
      if (this.scoreNum > 0) {
        this.scoreNum = parseInt(this.scoreNum) - 1;
      }
    },
    increaseNum: function() {
      if (!isNaN(parseInt(this.scoreNum))) {
        this.scoreNum = parseInt(this.scoreNum) + 1;
      }

    },
    getRedeemRewardList() {
      getRedeemReward().then((data) => {
        this.redeemRewardlist = data.data.beanList;

      }, (msg) => {

      })
    },
  },
  mounted() {
    this.getRedeemRewardList();
    // this.GetScore().then(result => {
    //   console.log('result',result);
    //   this.puchasePoint = result.data.puchasePoint;
    //   this.activityPoint = result.data.activityPoint;
    // })
    this.GetlistLog().then(result => {
      this.logList = result.data.beanList;
    })
    this.GetstatisticsData().then(result => {
      console.log('result test', result);
      this.statisticsData = result.data;
    })
    this.GetInfo().then(result => {
      this.userInfo = result.data;
      console.log(this.userInfo)
    });
  },
}

</script>
<style lang="less">
@import '../order/orderList.less';
@import '../order/orderPre.less';
@import './score.less';

</style>
